<template>
    <div>
        <div class="tabbar">
            <button class="logout" @click="userLogout">退出登录</button>
        </div>
        <h1 class="title">赛题管理系统</h1>
        <el-button type="primary" icon="Plus" style="margin: 50px 0 0 30px;" @click="openAdd"
            v-if="token == 2">新增题目</el-button>
        <el-card style="margin: 30px;">
            <!-- 展示数据的表格 -->
            <el-table :data="problemList" border style="width: 80%" class="info-table">
                <el-table-column prop="problemId" label="问题编号" />
                <el-table-column prop="title" label="问题名称" />
                <el-table-column prop="content" label="问题内容" />
                <el-table-column prop="difficulty" label="问题难度" />
                <el-table-column label="操作" v-if="token == 2">
                    <template #="{ row }">
                        <el-button type="warning" @click="enterModify(row)">修改</el-button>
                        <el-button type="danger" @click="openDelete(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination background layout="prev, pager, next" :total="totalCount" style="margin-top: 20px;"
                v-model:current-page="current" :page-size="pageSize" />
            <!-- 修改的弹窗 -->
            <el-dialog v-model="modifyDialog">
                <el-form>
                    <el-form-item label="问题名称">
                        <el-input v-model="operatingProblem.title"></el-input>
                    </el-form-item>
                    <el-form-item label="问题内容">
                        <el-input type="textarea" v-model="operatingProblem.content"></el-input>
                    </el-form-item>
                    <el-form-item label="问题难度">
                        <el-select v-model="operatingProblem.difficulty" placeholder="Select"
                            style="width: 160px;margin:0 20px;">
                            <el-option v-for="item in options" :key="item" :label="item" :value="item" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button @click="modifyDialog = false">取消</el-button>
                    <el-button type="primary" @click="confirmModify">确认</el-button>
                </template>
            </el-dialog>
            <!-- 删除的弹窗 -->
            <el-dialog v-model="deleteDialog" style="width: 400px;">
                <span>确定要删除这个问题吗？</span>
                <template #footer>
                    <el-button @click="modifyDialog = false">取消</el-button>
                    <el-button type="primary" @click="confirmDelete">确认</el-button>
                </template>
            </el-dialog>

        </el-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import request from '@/utils/request'
import router from '@/router';
const token = localStorage.getItem('token')
// 控制弹窗开关
let modifyDialog = ref(false)
let deleteDialog = ref(false)
// 当前页数
let current = ref(1)
// 每页条数
const pageSize = 5
// 总共条数
let totalCount = ref(100)
let problemList = [
    {
        problemId: 1,
        title: 'sdfadf',
        content: 'sdafasdfa',
        difficulty: 1
    }
]

// 收集现在正在操作的数据
const operatingProblem = reactive({
    problemId: 1,
    title: '',
    content: '',
    difficulty: 1
})
// 难度的选项
const options = [1, 2, 3, 4, 5]
// 打开弹窗的事件
const enterModify = (row: any) => {
    operatingProblem.problemId = row.problemId
    operatingProblem.title = row.title
    operatingProblem.content = row.content
    operatingProblem.difficulty = row.difficulty
    modifyDialog.value = true
}

// 确认修改，发送请求
const confirmModify = async () => {
    modifyDialog.value = false
    await request.post('/modify', operatingProblem)
    // console.log(result)
    getInfo()
}
// 打开新增弹窗的事件,借用修改的弹窗
const openAdd = () => {
    operatingProblem.problemId = -1
    operatingProblem.title = ''
    operatingProblem.content = ''
    operatingProblem.difficulty = 1
    modifyDialog.value = true
}
// 打开删除弹窗的事件
const openDelete = (row: any) => {
    operatingProblem.problemId = row.problemId
    deleteDialog.value = true
}
// 确认删除，发送请求
const confirmDelete = async () => {
    deleteDialog.value = false
    // const data = { problemId: operatingProblem.problemId }
    const problemId = operatingProblem.problemId
    const result = await request.delete(`/delete?problemId=${problemId}`)
    // const result = await request({
    //     method: 'DELETE',
    //     url: '/delete',
    //     data:problemId
    // })
    console.log(result)
    getInfo()
}
// 获取数据
const getInfo = async () => {
    const page = current.value
    const result = await request({
        url: '/getInfo',
        params: {
            pageSize,
            page
        }
    })
    // 需要数据：{赛题列表：problemList,赛题总数：totalCount,}
    console.log(11111)
    problemList = result.data.records
    totalCount.value = result.data.total
}
// 挂载完毕发送请求
onMounted(getInfo)
// 登出事件
const userLogout = () => {
    localStorage.removeItem('token')
    router.push('/login')
}

</script>

<style scoped>
.title {
    font-size: 40px;
    text-align: center;
    margin-top: 60px;
}

.tabbar {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: rgb(107, 113, 236);
}

.logout {
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    height: 100%;
    background-color: rgb(107, 113, 236);
    border: 0;
    cursor: pointer;
    color: white;
}
</style>